<template>
  <div>
    <div style="background: #fff;" v-for="item in categoryList" :key="item.id">
    <h4>{{item.name}}</h4>
    <ul class="product_list">
      <li
        v-for="item1 in item.goodsList"
        :key="item1.id"
      
      >
        <img v-lazy="item1.list_pic_url" alt="" />
        <div>{{ item1.name }}</div>
        <section>{{ item1.retail_price | RMBformat}}</section>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["categoryList"],
  data() {
    return {};
  },

  components: {},

  computed: {},

  created() {},

  mounted() {},

  methods: {},
};
</script>
<style lang='less' scoped>
h4 {
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
}
.product_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  li {
    width: 49%;
    background: #fff;
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    img {
      width: 100%;
      display: block;
    }
    section {
      margin-top: 5px;
      color: darkred;
    }
  }
}
</style>